<template>
	<view>
		<view class="content_box">
			<view class="left_box">
				<image class="news_image" :src="data.picurl" mode="aspectFit"></image>
			</view>
			<view class="right_box">
				<view class="title">
					{{data.title}}
				</view>
				<view class="info" v-if="!data.looktime">
					{{data.author}}-{{data.hits}}浏览
				</view>
				<view class="info" v-else>
					{{data.looktime}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "News",
		props: {
			data: {
				type: Object,
				default: {
					picurl: '/static/images/sleep.jpeg', // 图片
					title: '默认的标题', // 标题
					author: 'xxx', // 作者
					hits: '100',// 浏览量
					//looktime: '2020-02-03 12:09:17'
				},
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.content_box {
		display: flex;
		height: 200rpx;

		.left_box {
			flex-shrink: 0;
			/* 防止第一个子盒子被压缩 */
			width: 260rpx;

			.news_image {
				width: 100%;
				height: 100%;
			}
		}

		.right_box {
			flex-grow: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding: 20rpx;
			font-size: 28rpx;

			// 超过2行...代替
			.title {
				display: -webkit-box;
				/* 必须使用webkit的box布局 */
				-webkit-line-clamp: 2;
				/* 限制显示2行 */
				-webkit-box-orient: vertical;
				/* 垂直排列子元素 */
				overflow: hidden;
				/* 隐藏超出部分 */
				text-overflow: ellipsis;
				/* 超出部分用省略号代替 */
				white-space: normal;
				/* 允许文本换行 */
			}
		}
	}
</style>